---
title: "Grid Auto Flow"
description: "Utilities for controlling how elements in a grid are auto-placed."
---

import plugin from 'tailwindcss/lib/plugins/gridAutoFlow'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Usage

Use the `grid-flow-{keyword}` utilities to control how the auto-placement algorithm works for a grid layout.

```html purple
<template preview class="bg-white p-8">
  <div class="grid grid-cols-3 grid-rows-3 grid-flow-col gap-4">
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">1</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">2</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">3</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">4</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">5</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">6</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">7</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">8</div>
    <div class="bg-purple-500 rounded-md h-12 flex items-center justify-center text-white text-2xl font-extrabold">9</div>
  </div>
</template>

<div class="grid **grid-flow-col** grid-cols-3 grid-rows-3 gap-4">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>
```

## Responsive

To control the grid-auto-flow property at a specific breakpoint, add a `{screen}:` prefix to any existing grid-auto-flow utility. For example, use `md:grid-flow-col` to apply the `grid-flow-col` utility at only medium screen sizes and above.

```html
<div class="grid **md:grid-flow-col** ...">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

### Variants

<Variants plugin="gridAutoFlow" name="grid-auto-flow" />

### Disabling

<Disabling plugin="gridAutoFlow" name="grid-auto-flow" />
